<template>
  <view class="container">
    <!-- 积分信息 -->
    <view class="points-info">
      <text class="points-label">我的积分</text>
      <text class="points-value">{{ userInfo.points }}</text>
    </view>
    
    <!-- 兑换选项卡 -->
    <view class="exchange-tabs">
      <view 
        class="tab-item" 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{active: currentTab === index}"
        @click="switchTab(index)"
      >
        <text>{{ tab }}</text>
      </view>
    </view>
    
    <!-- 兑换列表 -->
    <scroll-view 
      scroll-y 
      class="exchange-list"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view v-if="currentTab === 0" class="coupon-list">
        <view 
          class="coupon-item" 
          v-for="(item, index) in couponList" 
          :key="index"
          :class="{disabled: userInfo.points < item.points}"
        >
          <view class="coupon-left">
            <text class="coupon-amount" v-if="item.type === 1">¥{{ item.value }}</text>
            <text class="coupon-amount" v-else>{{ item.value }}折</text>
            <text class="coupon-condition">满{{ item.minConsume }}可用</text>
          </view>
          <view class="coupon-right">
            <text class="coupon-name">{{ item.name }}</text>
            <text class="coupon-time">有效期30天</text>
            <view class="exchange-btn" :class="{disabled: userInfo.points < item.points}" @click="exchangeCoupon(item)">
              <text>{{ item.points }}积分兑换</text>
            </view>
          </view>
        </view>
      </view>
      
      <view v-if="currentTab === 1" class="goods-list">
        <view 
          class="goods-item" 
          v-for="(item, index) in goodsList" 
          :key="index"
          :class="{disabled: userInfo.points < item.points}"
        >
          <image class="goods-image" :src="item.image" mode="aspectFill"></image>
          <view class="goods-info">
            <text class="goods-name">{{ item.name }}</text>
            <text class="goods-desc">{{ item.description }}</text>
            <view class="exchange-btn" :class="{disabled: userInfo.points < item.points}" @click="exchangeGoods(item)">
              <text>{{ item.points }}积分兑换</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="(currentTab === 0 && couponList.length === 0) || (currentTab === 1 && goodsList.length === 0)" class="empty-state">
        <image class="empty-icon" src="/static/icons/empty-points.svg" mode="aspectFit"></image>
        <text class="empty-text">暂无可兑换商品</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getUserInfo } from '@/api/user.js'

export default {
  data() {
    return {
      tabs: ['优惠券', '实物礼品'],
      currentTab: 0,
      refreshing: false,
      loading: false,
      userInfo: {},
      couponList: [
        {
          id: 1,
          name: '满20减5元券',
          type: 1,
          value: 5,
          minConsume: 20,
          points: 100
        },
        {
          id: 2,
          name: '满50减10元券',
          type: 1,
          value: 10,
          minConsume: 50,
          points: 200
        },
        {
          id: 3,
          name: '满100减20元券',
          type: 1,
          value: 20,
          minConsume: 100,
          points: 400
        },
        {
          id: 4,
          name: '9折优惠券',
          type: 2,
          value: 9,
          minConsume: 30,
          points: 300
        }
      ],
      goodsList: [
        {
          id: 1,
          name: '精美保温杯',
          description: '304不锈钢，24小时保温',
          image: 'https://picsum.photos/200/200?random=101',
          points: 1000
        },
        {
          id: 2,
          name: '帆布手提袋',
          description: '环保材质，容量大',
          image: 'https://picsum.photos/200/200?random=102',
          points: 800
        },
        {
          id: 3,
          name: '无线充电器',
          description: '快速充电，兼容多种设备',
          image: 'https://picsum.photos/200/200?random=103',
          points: 1500
        }
      ]
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    async initData() {
      await this.fetchUserInfo()
    },
    async fetchUserInfo() {
      try {
        this.loading = true
        const res = await getUserInfo()
        this.userInfo = res.data || {}
      } catch (error) {
        console.error('获取用户信息失败:', error)
        uni.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    switchTab(index) {
      this.currentTab = index
    },
    async onRefresh() {
      this.refreshing = true
      
      try {
        await this.fetchUserInfo()
      } finally {
        this.refreshing = false
      }
    },
    exchangeCoupon(item) {
      if (this.userInfo.points < item.points) {
        uni.showToast({
          title: '积分不足',
          icon: 'none'
        })
        return
      }
      
      uni.showModal({
        title: '兑换确认',
        content: `确定使用${item.points}积分兑换该优惠券吗？`,
        success: (res) => {
          if (res.confirm) {
            // 模拟兑换
            uni.showLoading({
              title: '兑换中'
            })
            
            setTimeout(async () => {
              uni.hideLoading()
              
              // 积分已在后端扣减，重新获取用户信息
              await this.fetchUserInfo()
              
              uni.showToast({
                title: '兑换成功',
                icon: 'success'
              })
            }, 1000)
          }
        }
      })
    },
    exchangeGoods(item) {
      if (this.userInfo.points < item.points) {
        uni.showToast({
          title: '积分不足',
          icon: 'none'
        })
        return
      }
      
      uni.showModal({
        title: '兑换确认',
        content: `确定使用${item.points}积分兑换${item.name}吗？`,
        success: (res) => {
          if (res.confirm) {
            // 模拟兑换
            uni.showLoading({
              title: '兑换中'
            })
            
            setTimeout(async () => {
              uni.hideLoading()
              
              // 积分已在后端扣减，重新获取用户信息
              await this.fetchUserInfo()
              
              uni.showToast({
                title: '兑换成功，请联系客服领取',
                icon: 'none',
                duration: 2000
              })
            }, 1000)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #fff8f8 0%, #fff5f7 50%, #fff8fa 100%);
  padding: 30rpx;
  display: flex;
  flex-direction: column;
}

.points-info {
  background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
  border-radius: 24rpx;
  padding: 40rpx;
  color: #fff;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 107, 107, 0.2);
  text-align: center;
  
  .points-label {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    display: block;
    opacity: 0.9;
  }
  
  .points-value {
    font-size: 72rpx;
    font-weight: 600;
    text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  }
}

.exchange-tabs {
  display: flex;
  background: #fff;
  border-radius: 45rpx;
  margin-bottom: 30rpx;
  padding: 6rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 16rpx 0;
    border-radius: 45rpx;
    transition: all 0.3s ease;
    
    &.active {
      background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
      color: #fff;
      font-weight: 500;
      box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
    }
  }
}

.exchange-list {
  flex: 1;
}

.coupon-list {
  .coupon-item {
    display: flex;
    background: #fff;
    border-radius: 24rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
    
    &.disabled {
      opacity: 0.7;
      filter: grayscale(0.5);
    }
    
    &::before {
      content: '';
      position: absolute;
      left: 200rpx;
      top: -10rpx;
      bottom: -10rpx;
      width: 20rpx;
      background-image: radial-gradient(
        circle at 0 50%,
        transparent 10rpx,
        #fff 10rpx
      );
      background-size: 20rpx 40rpx;
      background-repeat: repeat-y;
      z-index: 1;
    }
    
    .coupon-left {
      width: 200rpx;
      background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
      color: #fff;
      padding: 30rpx 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      
      .coupon-amount {
        font-size: 48rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
      }
      
      .coupon-condition {
        font-size: 24rpx;
        opacity: 0.9;
      }
    }
    
    .coupon-right {
      flex: 1;
      padding: 30rpx;
      position: relative;
      
      .coupon-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .coupon-time {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
      }
      
      .exchange-btn {
        display: inline-block;
        background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
        color: #fff;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        
        &.disabled {
          background: #ccc;
        }
      }
    }
  }
}

.goods-list {
  .goods-item {
    display: flex;
    background: #fff;
    border-radius: 24rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
    
    &.disabled {
      opacity: 0.7;
      filter: grayscale(0.5);
    }
    
    .goods-image {
      width: 200rpx;
      height: 200rpx;
      flex-shrink: 0;
    }
    
    .goods-info {
      flex: 1;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      
      .goods-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .goods-desc {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 20rpx;
        flex: 1;
      }
      
      .exchange-btn {
        align-self: flex-start;
        background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
        color: #fff;
        font-size: 24rpx;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        
        &.disabled {
          background: #ccc;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>